<template>
<block>
<!--
  - Copyright (C) 2018-2019
  - All rights reserved, Designed By www.joolun.com
  - 注意：
  - 本软件为www.joolun.com开发研制，项目使用请保留此说明
-->
<view class="flex bg-white radius text-white main" v-if="couponInfoClone.type == '1'">
  <view class="flex-twice padding-sm radius t1-r">
    <view class="flex">
      <view class="flex-sub text-xxl text-bold text-price overflow-1">{{couponInfoClone.reduceAmount}}</view>
      <view class="flex-twice">
        <view class="text-sm overflow-1">{{couponInfoClone.name}}</view>
        <view class="text-xs overflow-1">订单满{{couponInfoClone.premiseAmount}}元可使用</view>
        <view class="text-xs">
          {{couponInfoClone.suitType == '1' ? '全部商品可用' : couponInfoClone.suitType == '2' ? '指定商品可用' : couponInfoClone.suitType == '3' ? '指定商品不可用' : ''}}
        </view>
      </view>
    </view>
    <view class="text-xs" v-if="couponInfoClone.expireType == '1'">领取后{{couponInfoClone.validDays}}天有效</view>
    <view class="text-xs" v-if="couponInfoClone.expireType == '2'">{{couponInfoClone.validBeginTime}}至{{couponInfoClone.validEndTime}}</view>
  </view>
  <view class="flex-sub padding-sm radius text-center t1-l">
    <view class="padding-xs">代金券</view>
    <button class="cu-btn bg-white" v-if="(!couponInfoClone.couponUser)" @tap="couponUserSave">立即领取</button>
    <view v-if="couponInfoClone.couponUser">
      <view class="padding-xs" v-if="(!toUse)">已领取</view>
      <navigator hover-class="none" :url="'/pages/goods/goods-list/index?couponUserId='+(couponInfoClone.couponUser.id)" class="cu-btn bg-white sm" v-if="toUse">已领取，去使用</navigator>
    </view>
  </view>
</view>
<view class="flex bg-white radius text-white main" v-if="couponInfoClone.type == '2'">
  <view class="flex-twice padding-sm radius t2-r">
    <view class="flex">
      <view class="flex-sub text-xxl text-bold overflow-1">{{couponInfo.discount}}<text class="text-sm">折</text></view>
      <view class="flex-twice">
        <view class="text-sm overflow-1">{{couponInfoClone.name}}</view>
        <view class="text-xs overflow-1">订单满{{couponInfoClone.premiseAmount}}元可使用</view>
        <view class="text-xs">
          {{couponInfoClone.suitType == '1' ? '全部商品可用' : couponInfoClone.suitType == '2' ? '指定商品可用' : couponInfoClone.suitType == '3' ? '指定商品不可用' : ''}}
        </view>
      </view>
    </view>
    <view class="text-xs" v-if="couponInfoClone.expireType == '1'">领取后{{couponInfoClone.validDays}}天有效</view>
    <view class="text-xs" v-if="couponInfoClone.expireType == '2'">{{couponInfoClone.validBeginTime}}至{{couponInfoClone.validEndTime}}</view>
  </view>
  <view class="flex-sub padding-sm radius text-center t2-l">
    <view class="padding-xs">折扣券</view>
    <button class="cu-btn bg-white" v-if="(!couponInfoClone.couponUser)" @tap="couponUserSave">立即领取</button>
    <view v-if="couponInfoClone.couponUser">
      <view class="padding-xs" v-if="(!toUse)">已领取</view>
      <navigator hover-class="none" :url="'/pages/goods/goods-list/index?couponUserId='+(couponInfoClone.couponUser.id)" class="cu-btn bg-white sm" v-if="toUse">已领取，去使用</navigator>
    </view>
  </view>
</view>
</block>
</template>

<script>
/**
 * Copyright (C) 2018-2019
 * All rights reserved, Designed By www.joolun.com
 * 注意：
 * 本软件为www.joolun.com开发研制，项目使用请保留此说明
 */
const app = getApp();
export default {
                    data() {
return {
  couponInfoClone: {
    reduceAmount: "",
    name: ""
  }
};
}, 
props: {
  couponInfo: {
    type: Object,
    default: () => ({})
  },
  toUse: {
    type: Boolean,
    default: true
  }
}, 
methods: {
  couponUserSave() {
    app.globalData.api.couponUserSave({
      couponId: this.data.couponInfo.id
    }).then(res => {
      uni.showToast({
        title: '领取成功',
        icon: 'success',
        duration: 2000
      });
      let couponInfo = this.data.couponInfo;
      couponInfo.couponUser = res.data;
      this.setData({
        couponInfoClone: couponInfo
      });
      this.$emit('receiveCoupon', {
        detail: couponInfo
      });
    });
  }

},
                    watch:{
                      couponInfo: {
                        handler: function(newVal, oldVal) {
                          this.couponInfoClone = newVal;
                        },

                        immediate: true,
                        deep: true
                      }
                    }
                };
</script>
<style >

.main{
  height: 160rpx;
  
}
.t1-r{
  background: radial-gradient(circle at top right, transparent 5px, #f37b1d 0) top right, radial-gradient(circle at bottom right, transparent 5px, #f37b1d 0) bottom right;
  background-size: 100% 60%;
  background-repeat: no-repeat;
}
.t1-l{
  background: radial-gradient(circle at top left, transparent 5px, #f37b1d 0) top left,radial-gradient(circle at bottom left, transparent 5px, #f37b1d 0) bottom left;
  background-size: 100% 60%;
  background-repeat: no-repeat;
  border-left: 2rpx dashed rgba(255,255,255,.3);
}
.t2-r{
  background: radial-gradient(circle at top right, transparent 5px, #39b54a 0) top right, radial-gradient(circle at bottom right, transparent 5px, #39b54a 0) bottom right;
  background-size: 100% 60%;
  background-repeat: no-repeat;
}
.t2-l{
  background: radial-gradient(circle at top left, transparent 5px, #39b54a 0) top left,radial-gradient(circle at bottom left, transparent 5px, #39b54a 0) bottom left;
  background-size: 100% 60%;
  background-repeat: no-repeat;
  border-left: 2rpx dashed rgba(255,255,255,.3);
}
</style>